import { Product } from '@/types/product'
import React, { FC, useRef } from 'react'
import { OrderDetailData } from '@/types/orderList/orderDetail'
import OrderDetail from './orderDetail'
import { useNavigate } from 'react-router-dom'
import { useUpdateEffect } from 'ahooks'
interface OrderParam {
  orderDetailData: OrderDetailData
}
const orderGoodsList: FC<OrderParam> = (props) => {
  const navigate = useNavigate()
  if (!props.orderDetailData.orderInfo) {
    return null
  }

  return (
    <div className="w-auto h-auto bg-white  shadow-bs5 m-r1.2 rounded-r0.8 ">
      <div className="">
        <span className=" inline-block pl-r1.2 mt-r1.6">
          {props.orderDetailData.orderInfo.statusDesc}
        </span>
        {props.orderDetailData.productInfo.map((val, key) => (
          <div key={key}>
            {' '}
            <OrderDetail key={key} product={val}></OrderDetail>{' '}
            {props.orderDetailData.productInfo.length > 0 ? (
              <div className=" clear-both  border border-white-F3F3F4  scale-y-50 mt-r0.0 mb-r0.0 "></div>
            ) : null}
          </div>
        ))}
      </div>
      <div className="h-r3.4 leading-r2.5 pb-r1.6 ">
        <div className=" text-right pr-r1.6 text-r1.2  font-regular text-gray-666666">
          <span>共{props.orderDetailData.productInfo.length}项，实付款</span>{' '}
          <span className=" text-r1.4 text-gray-333333 font-semibold">
            ¥{props.orderDetailData.orderInfo.realPrice}
          </span>
        </div>
      </div>
    </div>
  )
}

export default orderGoodsList
